<template>
    <Modal
            class-name="vertical-center-modal"
            v-model="modal"
            :title="title">
        <div v-if="modal">
            <Form ref="formModalPwd" :model="formModalPwd" :rules="ruleModalPwd" :label-width="80" action="javascript:void(0)">
                <FormItem label="新密码" prop="password">
                    <Input type="password" v-model="formModalPwd.password"></Input>
                </FormItem>
                <FormItem label="确认密码" prop="passwordCheck">
                    <Input type="password" v-model="formModalPwd.passwordCheck"></Input>
                </FormItem>
            </Form>
            <slot></slot>
        </div>
        <div slot="footer">
            <button class="btn btn-danger" type="button" @click='cancel'>取消</Button>
            <btn-submit class="btn btn-success" type="submit" :p-click="ok('formModalPwd')">确定</btn-submit>
        </div>
    </Modal>
</template>
<script>
    const setDataDef = {

    };
    export default{
        name:'PasswordAlert',
        props:{
            pTitle:String,
            pSubmit:Function,
        },
        data () {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else{
                    if(value.length <6){
                        callback(new Error('请输入6位及以上密码'));
                    }else {
                        if (this.formModalPwd.passwordCheck !== '') {
                            // 对第二个密码框单独验证
                            this.$refs.formModalPwd.validateField('passwordCheck');
                        }
                        callback();
                    }
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formModalPwd.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                modal:false,
                info:{},
                formModalPwd: {
                    password: '',
                    passwordCheck: ''
                },
                ruleModalPwd: {
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwordCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                }
            }
        },
        computed:{
            title(){
                return this.pTitle||'设置密码'
            },
        },
        methods: {
            handleOpen(data){
                this.info = Object.assign({},data,setDataDef);
                this.$set(this,'modal',true);
            },
            cancel () {
                this.$emit('on-cancel');
                this.close()
            },
            ok (name) {
                return async ()=>{
                    const  valid = await this.$refs[name].validate();
                    if (valid) {
                        if(this.pSubmit){
                            const res = await this.pSubmit(Object.assign(this.info,{
                                password_new:this.formModalPwd.password
                            }));
                            if(res){
                                this.close()
                            }
                            return res;
                        }else {
                            return false
                        }
                    } else {
                        this.$Message.error('表单验证失败!');
                        return false;
                    }
                }
            },
            close() {
                this.$set(this, 'modal', false);
                this.formModalPwd.password = '';
                this.formModalPwd.passwordCheck = '';
            }
        },
        components:{
        }
    }
</script>